<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header height="76px">
      <h2>数据面板</h2>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据面板</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <!-- 主体内容区域 -->
    <el-main>
      <div class="dashboard-container">
        <!-- 四个图标显示 -->
        <div class="number_container">
          <div class="square">
            <div icon-class="doc" class="icon" />
            <div class="title">
              <div class="subtitle">医师人数</div>
              <div class="number">{{ doctors }}</div>
            </div>
          </div>

          <div class="square">
            <div icon-class="bag" class="icon" />
            <div class="title">
              <div class="subtitle">药物种类</div>
              <div class="number">{{ drugs }}</div>
            </div>
          </div>

          <div class="square">
            <div icon-class="operation" class="icon" />
            <div class="title">
              <div class="subtitle">合作企业</div>
              <div class="number">{{ companies }}</div>
            </div>
          </div>

          <div class="square">
            <div icon-class="patient" class="icon" />
            <div class="title">
              <div class="subtitle">入驻药店</div>
              <div class="number">{{ sales }}</div>
            </div>
          </div>
        </div>

        <div class="father_chart"></div>

        <!-- 病人数量+图标 -->

        <!-- 医生数量 -->

        <!-- 药物种类 -->
        <div id="histogram" class="histogram"></div>
        <!-- 销售城市量柱状图表 -->
        <div class="chartcontainer">
          <div class="rectangle">
            <h1 style="color: gray">医院科室</h1>
            <div id="piechart" class="piechart"></div>
          </div>

          <div class="rectangle">
            <h1 style="color: gray">最新政策</h1>
            <div style="float: left; width: 100%">
              <el-table :data="materials" stripe style="width: 100%">
                <el-table-column prop="notice" label="最新医保政策" width="450">
                  <template slot-scope="scope">
                    <div>{{ scope.row.notice }}</div>
                  </template>
                </el-table-column>

                <el-table-column prop="date" width="100">
                  <template slot="header">
                    <a href="?#/manage/medical/policy" target="_blank">More&lt;&lt;</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="float: left; width: 100%">
              <el-table :data="policys" stripe style="width: 100%">
                <el-table-column prop="notice" label="最新医药公司政策" width="450">
                  <template slot-scope="scope">
                    <div>{{ scope.row.notice }}</div>
                  </template>
                </el-table-column>

                <el-table-column prop="date" width="100">
                  <template slot="header" >
                    <a href="?#/manage/company/policy" target="_blank">More&lt;&lt;</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>

        <!-- 医生人数表格 -->
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { getAllDashboardInfo } from "../../api/admin/dashboardApi"


export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      doctors: 10,
      drugs: 10,
      companies: 10,
      sales: 10,
      docLevelType:["主任医师","普通医师","实习医师"],
      docLevel:[],
      picData:[],

      materials:[
        // {
        //   notice:'医保卡报销额度变高了',
        //   date:'2022-10-5'
        // }
      ],
      policys:[

      ]
    };
  },
  mounted() {
    this.initData();
    
    
    // this.initMap()
    // this.barchart()
  },
  created() {},
  methods: {
    
    initData(){
      getAllDashboardInfo().then((res)=>{
      let dashboardData = res.data.data.data;
      console.log(dashboardData)
      this.doctors = dashboardData.doctorNumb
      this.drugs = dashboardData.drugNumb
      this.companies  = dashboardData.companyNumb
      this.sales = dashboardData.saleNumb
      console.log(dashboardData.docLevel)
      this.docLevel.push(dashboardData.docLevel.l1)
      this.docLevel.push(dashboardData.docLevel.l2)
      this.docLevel.push(dashboardData.docLevel.l3)
      this.histogram();
      let treatMap = dashboardData.treatMap
      for(var item in treatMap){
        this.picData.push({
          name:item,
          value:treatMap[item]
        })
      }
      this.piechart();
      let materialsList = dashboardData.materials
      materialsList.forEach(element => {
        if(element.message.length>30){
          element.message = element.message.substr(0,29)+'···'
          console.log(element.message)
        }
        this.materials.push({
          notice:element.message,
          date:element.updateTime
        })
      });
      let policyList = dashboardData.policys
      policyList.forEach(element => {
        if(element.message.length>30){
          element.message = element.message.substr(0,29)+'···'
          console.log(element.message)
        }
        this.policys.push({
          notice:element.message,
          date:element.updateTime
        })
      });
      // policys
      console.log(this.picData)

    })
    },
    histogram() {
      var chartDom = document.getElementById("histogram");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "医生职级",
          left: "60px",
          padding: [10, 10, 10, 0],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.docLevelType,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              {
                value: this.docLevel[0],
                itemStyle: {
                  color: "#2ecc71",
                },
              },
              {
                value: this.docLevel[1],
                itemStyle: {
                  color: "#70a1ff",
                },
              },
              {
                value: this.docLevel[2],
                itemStyle: {
                  color: "#eccc68",
                },
              },
            ],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    },


    piechart() {
      var pieChart = echarts.init(document.getElementById("piechart"));

      var option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "医师人数",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.picData
          },
        ],
      };
      pieChart.clear();
      pieChart.setOption(option, true); //true是设置是否可动态更新数据
    },
  },
};
</script>

<style  scoped>
.el-container {
  height: 100%;
}
.el-container .el-header {
  background-color: #fff;
  border-bottom: 1px solid #e6e9eb;
  padding: 15px 20px 0 20px;
}
.el-container .el-header h2 {
  font-size: 20px;
  margin-bottom: 15px;
}
.el-container .el-main {
  box-sizing: border-box;
  margin: 20px 15px 10px 20px;
  background-color: #fff;
  border-top: 3px solid #e8ebed;
  padding: 0;
  /* overflow: hidden; */
}
.el-container .el-main .main-title {
  height: 35px;
  padding: 10px;
  border-bottom: 1px solid #e6e9eb;
  margin-bottom: 10px;
}
.el-container .el-main .main-title h3 {
  margin-top: 10px;
  float: left;
}
/* .el-container .el-main .main-title .new-add {
  float: right;
  background: url("../assets/add.png") no-repeat;
  background-size: 100%;
  height: 40px;
  width: 40px;
  margin-right: 20px;
} */
.el-container .el-main .search-col {
  margin-left: 20px;
  margin-bottom: 5px;
}
.el-container .el-table {
  padding: 0px 20px;
  border: 0;
}
.el-container .el-table .demo-table-expand {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.el-container .el-table .demo-table-expand .el-form-item {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.el-container .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-container {
  margin: 10px;
  margin-left: 20px;
  height: 800px;
}
.dashboard-text {
  font-size: 30px;
  line-height: 46px;
}
.number_container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 20px; */
  margin-bottom: 20px;
  height: 100px;
}
.square {
  padding: 20px;
  width: 285px;
  height: 50px;
  background-color: white;
  margin: 10px;
  border-radius: 15px;
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
}
.father_chart {
  display: flex;
  /* 将父级 div 设置为 flex 容器 */
  justify-content: center;
  /* 将子级 div 在主轴方向上居中对齐 */
}
.histogram {
  width: 1200px;
  height: 400px;
  margin: 0 auto;
  /* 将子级 div 的左右外边距设置为 auto */
  padding: 20px;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
}
.chartcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.rectangle {
  padding: 20px 20px 20px 20px;
  width: 590px;
  height: 500px;
  border-radius: 15px;
  background-color: white;
  box-shadow: 0px 12px 26px rgba(16, 30, 115, 0.06);
  margin: 10px;
}
.piechart {
  /* margin-left: -10px; */
  margin-top: 40px;
  width: 600px;
  height: 400px;
}
.map {
  margin-left: -10px;
  width: 600px;
  height: 400px;
}
.icon {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.title {
  display: inline-block;
  margin-left: 30px;
  vertical-align: top;
}
.subtitle {
  font-size: 18px;
  font-weight: 700;
  color: #25282b;
}
.number {
  margin-top: 12px;
  color: #336cfb;
  font-size: 22px;
  display: inline-block;
}
.variation {
  display: inline-block;
  margin-left: 15px;
  vertical-align: auto;
  color: #0deb48;
}
</style>